<template>
  <div class="breadcrumb">
    <a-breadcrumb>
      <template v-for="(breadcrumb, index) in breadcrumbs" :key="index">
        <a-breadcrumb-item v-if="index === breadcrumbs.length - 1">{{ breadcrumb.name }}</a-breadcrumb-item>
        <a-breadcrumb-item v-else>
          <router-link :to="{ path: breadcrumb.path }">
            <dashboard-outlined v-if="index === 0" class="margin-right-sm"/>{{ breadcrumb.name }}
          </router-link>
        </a-breadcrumb-item>
      </template>
    </a-breadcrumb>
  </div>

</template>

<script setup lang="ts">
import {DashboardOutlined} from "@ant-design/icons-vue";
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const breadcrumbs = ref<{ name: string; path: string }[]>([]);

watch(
  () => route.path,
  () => {
    const matchedRoutes = route.matched.filter(route => route.meta && route.meta.title);
    breadcrumbs.value = matchedRoutes.map(route => ({
      name: route.meta.title as string,
      path: route.path,
    }));
  },
  { immediate: true }
);
</script>

<style scoped>
  .breadcrumb{

  }
</style>